<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="formData.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="formData.mobile"
          type="tel"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block native-type="submit"> 注册 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { UserManageType } from "../../interfase/module/user";
import { userServe } from "../../api/user";
import { showToast } from "vant";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "UserResgis",
  props: {},
  setup() {
    const router = useRouter();
    const UserFace = userServe();
    const state = {
      formData: ref<UserManageType.UserRegis>(new UserManageType.UserRegis()),
    };
    const onSubmit = async () => {
      const result = await UserFace.registry(state.formData.value);
      console.log(result);
      if (result.code == 1) {
        showToast({
          type: "success",
          message: result.msg,
          onClose() {
            router.replace({
              path: "/user/login",
            });
          },
        });
      } else {
        showToast({
          type: "fail",
          message: result.msg,
          onClose() {
            state.formData.value = new UserManageType.UserRegis();
          },
        });
      }
    };

    return {
      ...state,
      onSubmit,
    };
  },
});
</script>

<style></style>
